{% extends "base.html" %}

{% block title %}监视器{% endblock %}

{% block content%}

<div class="container">
    <h1 class="display-4 text-center">计算机运行状态<small class="text-muted">&nbsp;CPU&内存</small></h1>
    <hr>
    <br/>
    <!--图表-->
    <div class="row">
        <!-- 内存 5列宽 -->
        <div class="col col-5">
            <!-- 卡片组样式 -->
            <div class="card-group">
                <div class="card bg-light border-secondary">
                    <!-- 占用率图 -->
                    <div id="memo_gauge" style="width:500px; height:450px;"></div>
                    <!-- 详情数据 -->
                    <div class="card-body">
                        <h6 class="card-title text-dark">[明细]</h6>
                        <p class="card-text text-danger">
                            总内存：<span id="m_total">0</span>G |
                            已用：<span id="m_used">0</span>G |
                            可用：<span id="m_available">0</span>G
                        </p>
                    </div>
                    <!-- 获取数据时间戳 -->
                    <div class="card-footer">
                        更新时间：<small class="text-muted"><span id="time_stamp"></span></small>
                    </div>
                </div>
            </div>
        </div>
        <!-- CPU 7列宽 -->
        <div class="col col-7">
            <div id="cpu_line" style="width:800px; height:500px;"></div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
    <!--继承父模板scripts处的内容-->
    {{ super() }}
    <script type='text/javascript' src='{{ url_for("static", filename="js/jquery-3.5.1.js") }}'></script>
    <script type='text/javascript' src='{{ url_for("static", filename="js/echarts.min.js") }}'></script>
    <script>
        var cpu_chart = echarts.init(document.getElementById('cpu_line'), 'white', {renderer: 'canvas'});
        var memo_chart = echarts.init(document.getElementById('memo_gauge'), 'white', {renderer: 'canvas'});
        
        function cpu_fetchData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/cpu_json",
                dataType: 'json',
                success: function (result) {
                    //指定图表的配置项和数据
                    cpu_chart.setOption(result);
                }
            });
        }

        function memo_fetchData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:5000/memo_json",
                dataType: 'json',
                success: function (result) {
                    //将获取的JSON数据解码
                    //可以使用点号.或中括号[]来访问对象的值
                    memo_chart.setOption(JSON.parse(result.c_memo))
                    $('#m_total').html(result["total"])
                    $('#m_used').html(result["used"])
                    $('#m_available').html(result["available"])
                    $('#time_stamp').html(result["stamp"])
                }
            });
        }

        $(
            function() {
                cpu_fetchData(cpu_chart);
                setInterval(cpu_fetchData, 2000);

                memo_fetchData(memo_chart);
                setInterval(memo_fetchData, 2000);
            }
        );
    </script>
{% endblock %}
